<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="flex-1" style="overflow: hidden;">
			<scroll-view class="screen-all" scroll-y>
			<!-- 订单状态 -->
			<!-- pay_status 1=待付款,2=已付款,3=已完成,4=已退款 -->
			<view v-if="orderInfo && orderInfo.pay_status == 1" class="head-view flex row center">
				<image class="head-icon" src="../../static/order_des.png"></image>
				<text class="head-title">等待支付</text>
			</view>
			<view v-if="orderInfo && orderInfo.pay_status == 2" class="head-view flex row center">
				<image class="head-icon" src="../../static/order_des.png"></image>
				<text class="head-title">已付款</text>
			</view>
			<view v-if="orderInfo && orderInfo.pay_status == 3" class="head-view flex row center">
				<image class="head-icon" src="../../static/order_des.png"></image>
				<text class="head-title">已完成</text>
			</view>
			<view v-if="orderInfo && orderInfo.pay_status == 4" class="head-view flex row center">
				<image class="head-icon" src="../../static/order_des.png"></image>
				<text class="head-title">已退款</text>
			</view>
			<!-- 商品列表 -->
			<view class="goods-view flex">
				<view class="goods-title flex row aCenter">商品列表</view>
				<!-- 商品列表 -->
				<view class="goods-item flex row aCenter" v-for="(item,index) in goods" :key="index">
					<image class="goods-image" :src="item.goods_image"></image>
					<view class="goods-riget flex-1 flex">
						<text class="goods-name">{{item.goods_name}}</text>
						<view class="goods-info flex row aCenter">
							<text v-if="item.spec_name" class="goods-price">【{{item.spec_name}}】</text>
							<text></text>
							<text class="goods-price">¥{{item.shop_price}}</text>
						</view>
						<text class="goods-num">x{{item.goods_num}}</text>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="goods-view goods-view-margin flex">
				<view class="goods-title flex row aCenter">订单信息</view>
				<view class="order-info-item order-info-margin flex row aCenter">
					<text class="order-title">订单时间</text>
					<text class="order-info">{{orderInfo.createtime}}</text>
				</view>
				<view class="order-info-item flex row aCenter">
					<text class="order-title">订单金额</text>
					<text class="order-info">¥{{orderInfo.zong_price}}</text>
				</view>
				<view class="order-info-item flex row aCenter">
					<text class="order-title">优惠金额</text>
					<text class="order-info">-¥{{orderInfo.discount_money}}</text>
				</view>
				<view v-if="orderInfo && (orderInfo.pay_status == 2 || orderInfo.pay_status == 3)" class="order-info-item flex row aCenter">
					<text class="order-title">实付金额</text>
					<text class="order-info">{{orderInfo.order_amount}}</text>
				</view>
			</view>
			<!-- 底部内容 -->
			<view class="bottom-view"></view>
			</scroll-view>
		</view>
		<view class="pay-view flex row aCenter">
			<text v-if="orderInfo.zong_price == orderInfo.order_amount" class="pay-text">总计：¥{{orderInfo.order_amount}}</text>
			<text v-if="orderInfo.zong_price != orderInfo.order_amount" class="pay-text">总计：<text class="goods-old-price">¥{{orderInfo.zong_price}}</text>¥{{orderInfo.order_amount}}</text>
			<view v-if="orderInfo.pay_status == 1" class="pay-btn flex center" @click.stop="goPay()">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				goods: [],
			}
		},
		onLoad(opt) {
			this.getOrderInfo(opt.id);
		},
		methods: {
			getOrderInfo (id) {
				// api/order/orderInfo
				let params = {
					token: uni.getStorageSync("token"),
					id: id,
				}
				console.log(params);
				this.$request("api/order/order_info", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.orderInfo = data.order;
							this.goods = data.order_goods;
						}else{
							
						}
					}).catch((e) => {
						console.log(e);
					});
			},
			goPay () {
				// totlePrice: 0, //应付款
				// orderId: 0, //订单id
				uni.navigateTo({
					url: '/pages/role-user/pay?totlePrice=' + this.orderInfo.order_amount + '&orderId=' + this.orderInfo.id,
				})
			},
		}
	}
</script>

<style scoped>
	.box {
		background-color: #010B24;
	}
	.head-view {
		width: 100%;
		height: 150rpx;
	}
	.head-icon {
		width: 37rpx;
		height: 37rpx;
		margin-right: 12rpx;
	}
	.head-title {
		font-size: 30rpx;
		color: #FFF;
	}
	.goods-view {
		width: 690rpx;
		border-radius: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;
		margin-left: 30rpx;
		background-color: #FFF;
	}
	.goods-view-margin {
		margin-top: 20rpx;
	}
	.goods-title {
		height: 90rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}
	.goods-item {
		width: 100%;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}
	.goods-image {
		width: 134rpx;
		height: 134rpx;
		background-color: #F2F2F2;
		border-radius: 10rpx;
	}
	.goods-riget {
		margin-left: 20rpx;
	}
	.goods-name {
		font-size: 28rpx;
		color: #242424;
		overflow: hidden;
		margin-bottom: 8rpx;
	}
	.goods-price {
		font-size: 28rpx;
		color: #242424;
		font-weight: bold;
		text-align: right;
	}
	.goods-old-price {
		text-decoration: line-through;
		margin-right: 12rpx;
	}
	.goods-info {
		width: 100%;
		justify-content: space-between;
	}
	.goods-num {
		flex: 1;
		font-size: 24rpx;
		color: #242424;
		text-align: right;
	}
	.order-info-margin {
		margin-top: 20rpx;
	}
	.order-info-item {
		padding: 12rpx 0;
		justify-content: space-between;
	}
	.order-title {
		font-size: 26rpx;
		color: #616161;
	}
	.order-info {
		font-size: 26rpx;
		color: #242424;
	}
	.bottom-view {
		height: 150rpx;
	}
	.pay-view {
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 30rpx;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}
	.pay-text {
		font-size: 28rpx;
		color: #FFF;
	}
	.pay-btn {
		width: 249rpx;
		height: 87rpx;
		background-color: #B053FF;
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFF;
	}
	.pay-btn:active {
		background-color: #B053FFCC;
	}
</style>
